<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./scroll-table.css">
    <link rel="stylesheet" href="./flex.css">
    <link rel="stylesheet" href="./myStyle.css">
    <script src="vue.min.js"></script>
    
</head>

<body>
    <header>华南农业大学选举中心</header>
    <div id="vue-root">
        <div class="flex-container">
            <!--候选人列表-->
            <div class=" flex-span2 flex-item">
                <p class="little-title">候选人列表&nbsp;
                    <a href="javaScript:void(0);" title="刷新" onclick="App.getCandidates();">
                        <img src="./renew.png" alt="刷新" class="renew-img">
                    </a>
                </p>
                <table>
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>姓名</th>
                            <th>得票数</th>
                            <th v-if="isCreator">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(candidate,index) in candidates">
                            <td>{{index+1}}</td>
                            <td>{{candidate.name}}</td>
                            <td>{{candidate.tickets}}</td>
                            <td v-if="isCreator">
                                <a href="javaScript:void(0)" class="ctrl" @click="delCandidate(candidate.name,index);">去除资格</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!--投票操作-->
            <div class="flex-span1 flex-item">
                <p class="little-title">投票操作</p>
                <div id="vote-pane" class="pane">
                    <label>当前账户：{{account}}</label>
                    <br />
                    <div v-if="reciever==''">
                        <label>手上持票：{{num}}&nbsp;&nbsp;</label>
                        <button class="btn btn-blue btn-md" onclick="App.buyTicket();">点击购票</button>
                        <br />
                        <label>投票操作：</label>&nbsp;&nbsp;
                        <select id="reciever">
                            <option value="" disabled selected>---请选择---</option>
                            <option v-for="(candidate,index) in candidates" :value="candidate.name">
                                {{candidate.name}}</option>
                        </select>
                        <br>
                        <div class="center-pane">
                            <button class="btn btn-lg btn-white" onclick="App.vote();">确认投票</button>
                        </div>
                    </div>
                    <div v-else>
                        <label>已投票给：{{candidate}}</label>
                    </div>
                </div>
            </div>
        </div>
        <hr />
        <div class="flex-container">
            <!--历史查询-->
            <div class="flex-span2 flex-item">
                <p class="little-title">历史查询&nbsp;
                    <a href="javaScript:void(0);" title="刷新" onclick="App.getVoters();">
                        <img src="./renew.png" alt="刷新" class="renew-img">
                    </a>
                </p>
                <label>选择候选人：</label>
                <select id="candidate" onchange="filter(value);">
                    <option selected value="">全部</option>
                    <option v-for="(candidate,index) in candidates" :value="candidate.name">{{candidate.name}}
                    </option>
                </select>
                <!-- <button class="btn btn-sm btn-blue" onclick="select();">查询得票记录</button> -->
                <table>
                    <thead>
                        <tr>
                            <th>投票账户</th>
                            <th>候选人</th>
                            <th>投出票数</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(his,index) in history" v-if="his.show">
                            <td>{{his.account}}</td>
                            <td>{{his.reciever}}</td>
                            <td>{{1}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!--选举管理-->
            <div v-if="isCreator" class="flex-span1 flex-item">
                <p class="little-title">选举管理</p>
                <div class="pane">
                    <label>选举状态：{{getStatus}}</label>
                    <div>
                        <div class="flex-container">
                            <button class="btn btn-lg btn-lightblue btn-space flex-span1" onclick="App.suspendVote();">暂停选举</button>
                            <button class="btn btn-lg btn-lightblue btn-space flex-span1" onclick="App.stopVote();">终止选举</button>
                        </div>
                        <div class="flex-container">
                            <button class="btn btn-lg btn-lightblue btn-space flex-span1" onclick="App.startVote();">启动选举</button>
                            <button class="btn btn-lg btn-lightblue btn-space flex-span1" onclick="App.newVote();">新建选举</button>
                        </div>
                    </div>
                    <div class="center-pane">
                        <input type="text" placeholder="输入候选人名字" id="nameInput">
                        <button onclick="App.addCandidate();">添加</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- <script src="./voteSys.js"></script> -->
    <script src="app.js"></script>
</body>

</html>